<template>
  <div id="main"
       class="whiteBG">
    <!-- 线路信息 -->
    <div class="haedBox padding-ho"
         id="haedBox">
      <div class="bg greenBG"></div>
      <div class="head whiteBG box-shadow">
        <div class="top border-color-gray-light2"
             @click="changeDirection">
          <div class="left border-color-gray-light2">
            <span class="tip gray">当前查询路线:</span>
            <span class="name">{{lineInfo.routeName}}</span>
            <i class="alifont gray change">&#xe867;</i>
          </div>
          <div class="right">
            <div class="placeBox">
              <div class="iconBox">
                <div class="i blueBG">
                  <i class="alifont white">&#xe601;</i>
                </div>
              </div>
              <span>{{mainData.startStation}}</span>
            </div>
            <div class="msgBox">
              <div>
                <div class="iconBox">
                  <div class="rBox">
                    <div class="r gray-light2BG"></div>
                  </div>
                </div>
                <div class="msg">
                  <span class="gray">全长:</span>
                  <span class="gray">{{lineMapInfo.distance|distance}}km</span>
                </div>
              </div>
              <div>
                <div class="iconBox">
                  <div class="rBox">
                    <div class="r gray-light2BG"></div>
                  </div>
                </div>
                <div class="msg">
                  <span class="gray">总站数:</span>
                  <span class="gray">{{lineSiteInfo.length}}s</span>
                </div>
              </div>
            </div>
            <div class="placeBox">
              <div class="iconBox">
                <div class="i orangeBG">
                  <i class="alifont white">&#xe600;</i>
                </div>
              </div>
              <span>{{mainData.endStation}}</span>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div>
            <i class="alifont gray">&#xe600;</i>
            <span class="gray">最早班:</span>
            <span class="blue-drak">{{lineInfo.startTime|addColon}}</span>
          </div>
          <div>
            <i class="alifont gray">&#xe600;</i>
            <span class="gray">最晚班:</span>
            <span class="blue-drak">{{lineInfo.endTime|addColon}}</span>
          </div>
          <div>
            <i class="alifont gray">&#xe600;</i>
            <span class="gray">单程价:</span>
            <span class="blue-drak">￥{{lineInfo.tickPrice}}</span>
          </div>
          <div>
            <i class="alifont gray">&#xe600;</i>
            <span class="gray"></span>
            <span class="blue-drak">{{lineMapInfo.type}}</span>
          </div>
          <div>
            <i class="alifont gray">&#xe600;</i>
            <span class="gray"></span>
            <span class="blue-drak">{{lineMapInfo.loop==1?'环线':'非环线'}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 线路车辆 -->
    <div class="bodyBox padding-ho"
         v-if="showMode=='line'">
      <div v-for="(item, index) in lineSiteInfo"
           :key="index">
        <!-- 站点 -->
        <div class="siteBox">
          <!-- icon盒子 -->
          <div class="iconBox">
            <div class="i blueBG"
                 v-if="index==0">
              <i class="alifont white">&#xe601;</i>
            </div>
            <div class="i orangeBG"
                 v-else-if="index==lineSiteInfo.length-1">
              <i class="alifont white">&#xe600;</i>
            </div>
            <div class="r"
                 v-else></div>
          </div>
          <!-- 站名 -->
          <span class="siteName">{{item.stationName}}</span>
          <!-- 车辆盒子 -->
          <div class="busBox">
            <block v-for="(itm, idx) in item.busInfos"
                   :key="idx">
              <div class="bus"
                   v-if="itm.lastPosition==5">
                <i class="alifont">&#xe7e4;</i>
                <span class="">{{itm.numberPlate}}</span>
              </div>
            </block>
          </div>
        </div>
        <!-- 路上 -->
        <div class="siteBox siteBoxMin"
             v-if="index!=lineSiteInfo.length-1">
          <!-- icon盒子 -->
          <div class="iconBox">
            <div class="rMin whiteBG"></div>
          </div>
          <!-- 站名 -->
          <span class="siteName"></span>
          <!-- 车辆盒子 -->
          <div class="busBox">
            <block v-for="(itm, idx) in item.busInfos"
                   :key="idx">
              <div class="bus"
                   v-if="itm.lastPosition==8">
                <i class="alifont">&#xe7e4;</i>
                <span class="">{{itm.numberPlate}}</span>
              </div>
            </block>
          </div>
        </div>
        <!--  -->
      </div>
    </div>
    <!-- 线路地图 -->
    <map :style="{height:screenHeight-(headHeight/2)+'px',marginTop:-(headHeight/2)+'px'}"
         :longitude="longitude"
         :latitude="latitude"
         :scale="14"
         :polyline="polyline"
         v-if="showMode=='map'"></map>
    <!-- 底部操作栏 -->
    <div class="fixBar">
      <div class="fixBg"
           v-if="showMode=='line'"
           :style="{height:barHeight+'px'}"></div>
      <div class="bar"
           id="fixBar"
           ref="fixBar">
        <button class="square greenBG"
                @click="changeMode">
          <i class="alifont white">{{showMode=='map'?'&#xe838;':'&#xe815;'}}</i>
        </button>
        <button class="square blueBG"
                open-type="share">
          <i class="alifont white">&#xe830;</i>
        </button>
        <button class="square yellowBG"
                @click="clikeLike(like?'unlike':'like')">
          <i class="alifont white"
             v-if="like">&#xe6ea;</i>
          <i class="alifont white"
             v-else>&#xe6eb;</i>
        </button>
        <button class="square orangeBG longSquare"
                @click="loadLine">
          <i class="alifont white"
             :class="{'xuanzhun':refreshing}">&#xe83f;</i>
          <span class="white">Refresh</span>
        </button>
      </div>
    </div>
    <!--  -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      barHeight: 0,
      headHeight: 0,
      screenHeight: 0,
      lineInfo: {},
      lineSiteInfo: {},
      lineMapInfo: {},
      lineMapDetail: {},
      options: {},
      showMode: 'line', // map line
      latitude: 0,
      longitude: 0,
      polyline: [],
      refreshing: false,
      like: false,
      transfer: false,
      mainID: '',
    }
  },
  onLoad (options) { },
  mounted () {
    this.options = this.$store.state.nowSelect;
    console.log('this.options', this.options);
    this.mainID = this.options.mainID
    this.loadLineMap(this.options.A.routeName);
    this.loadLine(this.options.A.routeName, this.options.A.startStation);
    this.getLike();
    uni.createSelectorQuery().select('#fixBar').boundingClientRect(data => {
      this.barHeight = data.height
    }).exec();
    uni.createSelectorQuery().select('#haedBox').boundingClientRect(data => {
      this.headHeight = data.height
    }).exec();
    uni.getSystemInfo({
      success: res => {
        this.screenHeight = res.windowHeight
      }
    });
  },
  methods: {
    // 获取收藏缓存
    getLike () {
      let storage = uni.getStorageSync('zhuhaiLike');
      this.like = false
      for (const i in storage)
        if (storage[i].mainID == this.mainID) this.like = true
    },
    // 收藏方法
    clikeLike (val) {
      uni.showLoading({
        title: '加载中'
      });
      let storage = uni.getStorageSync('zhuhaiLike'),
        options = this.options;
      if (val == 'like') {
        if (storage == '') storage = []
        storage.unshift({
          A: this.mainData,
          B: this.minorData,
          mainID: this.mainID,
        })
        this.like = true;
      } else if (val == 'unlike') {
        for (const i in storage)
          if (storage[i].mainID == this.mainID) storage.splice(i, 1)
        this.like = false;
      }
      uni.setStorageSync('zhuhaiLike', storage);
      uni.hideLoading();
    },
    // 改变方向
    changeDirection () {
      this.mainID = this.transfer ? this.options.A.segmentId : this.options.B.segmentId
      this.lineInfo = {},
        this.lineSiteInfo = {},
        this.lineMapInfo = {},
        this.lineMapDetail = {},
        this.transfer = !this.transfer;
      this.loadLineMap(this.mainData.routeName);
      this.loadLine(this.mainData.routeName, this.mainData.startStation);
      this.getLike();
    },
    // 加载官方线路信息
    async loadLine (routeName, startStation) {
      this.refreshing = true;
      setTimeout(() => {
        this.refreshing = false;
      }, 2000);
      uni.showLoading({
        title: '加载中'
      });
      wx.cloud.callFunction({
        name: 'http',
        data: {
          url: encodeURI(`${this.$store.state.httpRouteVehicle}routeName=${routeName}&startStation=${startStation}`),
        },
      }).then(res => {
        // console.log(res);
        this.lineSiteInfo = res.result['stations'];
        uni.hideLoading();
        if (!this.lineInfo.routeName) {
          delete res.result['stations']
          this.lineInfo = res.result;
          // console.log('this.lineInfo', this.lineInfo);
        }
        // console.log(this.lineSiteInfo);
      }).catch((err) => {
        uni.showToast({
          title: err.toString(),
          icon: "none",
          duration: 2000
        });
      })
    },
    // 加载高德线路信息
    async loadLineMap (routeName) {
      var [error, res] = await uni.request({
        url: encodeURI(`${this.$store.state.httpMap}&city=珠海&keywords=${routeName}`)
      });
      // console.log(res);
      this.lineMapDetail = res.data.buslines[0]['busstops'];
      delete res.data.buslines[0]['busstops']
      this.lineMapInfo = res.data.buslines[0];
      // console.log(this.lineMapDetail);
      // console.log(this.lineMapInfo);
      this.setMap();
    },
    // 设置地图
    async setMap () {
      let lineMapDetail = this.lineMapDetail,
        newDetail = {
          points: [],
          color: '#09acfe',
          width: 6,
          arrowLine: true,
          dottedLine: true,
        };
      for (const i in lineMapDetail) {
        let split = lineMapDetail[i].location.split(',');
        if (i == 0) {
          this.latitude = split[1];
          this.longitude = split[0];
        }
        newDetail.points.push({ latitude: split[1], longitude: split[0] })
      }
      this.$set(this.polyline, 0, newDetail)
      // console.log('this.polyline', this.polyline);
    },
    // 改变显示模式
    changeMode () {
      this.showMode = (this.showMode == 'map' ? 'line' : 'map');
    }
  },
  filters: {
    distance (val) {
      return parseFloat(val).toFixed(2);
    },
    addColon (val) {
      let string = val + ''
      if (string.length < 5) {
        string = '0' + string
      }
      return string;
    },
  },
  computed: {
    mainData () {
      let nowSelect = this.$store.state.nowSelect,
        data = {};
      if (nowSelect.A.segmentId == this.mainID) data = nowSelect.A
      else if (nowSelect.B.segmentId == this.mainID) data = nowSelect.B
      console.log('mainData', data);
      return data;
    },
    minorData () {
      let nowSelect = this.$store.state.nowSelect,
        data = {};
      if (nowSelect.A.segmentId == this.mainID) data = nowSelect.B
      else if (nowSelect.B.segmentId == this.mainID) data = nowSelect.A
      console.log('minorData', data);
      return data;
    }
  },
  onShareAppMessage (res) {
    if (res.from === 'button') {// 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: '够钟查公交',
      path: '/pages/zhuhai/zhuha',
      imageUrl: '/static/image/share.png',
    }
  }
}
</script>

<style lang="less" scoped>
#main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.iconBox {
  width: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  .i {
    border-radius: 100%;
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      font-size: 20rpx;
      height: 20rpx;
    }
  }
}
.haedBox {
  position: relative;
  padding-top: 30rpx;
  .bg {
    height: 50%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    position: absolute;
  }
  .head {
    padding: 26rpx 0;
    border-radius: 30rpx;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
  }
  .top {
    position: relative;
    z-index: 10;
    display: flex;
    border-bottom-style: solid;
    border-bottom-width: 4rpx;
    & > div {
      padding: 6rpx 10rpx 6rpx 40rpx;
      margin-bottom: 24rpx;
    }
    .left {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      border-right-style: solid;
      border-right-width: 1rpx;
      padding: 6rpx 10rpx;
      .tip {
        position: absolute;
        left: 20rpx;
        top: 6rpx;
        font-weight: bold;
        font-size: 24rpx;
      }
      .name {
        display: block;
        padding-top: 20rpx;
        font-weight: bolder;
        font-size: 60rpx;
        text-align: center;
      }
      .change {
        position: absolute;
        right: 4rpx;
        top: 0rpx;
        font-size: 50rpx;
        height: 50rpx;
      }
    }
    .right {
      width: 50%;
      & > div {
        display: flex;
        align-items: center;
      }
      .iconBox {
        width: 60rpx !important;
        margin-right: 10rpx;
      }
      .placeBox {
        span {
          font-size: 30rpx;
          font-weight: bold;
        }
      }
      .msgBox {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        & > div {
          display: flex;
          align-items: center;
          padding: 10rpx 0 0;
          &:last-child {
            padding-bottom: 10rpx;
          }
          .rBox {
            display: flex;
            justify-content: center;
            .r {
              margin: 10rpx 0;
              height: 10rpx;
              width: 10rpx;
              border-radius: 100%;
            }
          }
          .msg {
            display: flex;
            align-items: center;
            span {
              font-size: 22rpx;
            }
          }
        }
      }
    }
  }
  .bottom {
    position: relative;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 20rpx 0;
    & > div {
      display: flex;
      align-items: center;
      margin-right: 26rpx;
      margin-bottom: 16rpx;
      i {
        font-size: 30rpx;
        height: 30rpx;
      }
      span {
        font-size: 24rpx;
        line-height: 1;
      }
      .blue-drak {
        font-weight: bold;
      }
    }
  }
}
.bodyBox {
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  padding-right: 20rpx;
  padding-left: 20rpx;
  .siteBox {
    display: flex;
    align-items: center;
    padding: 10rpx 0;
    .iconBox {
      .i {
        i {
          margin-left: 2rpx;
        }
      }
      .r {
        height: 50%;
        border-radius: 100%;
        @R: 28rpx;
        height: @R;
        width: @R;
        border: 6rpx solid #909399;
        background-color: #eff2f7;
      }
      .rMin {
        height: 50%;
        border-radius: 100%;
        @R: 24rpx;
        height: @R;
        width: @R;
        border: 6rpx solid rgba(192, 196, 204, 0.322);
      }
    }
    .siteName {
      font-size: 28rpx;
      width: 35%;
      flex-shrink: 0;
      height: 40rpx;
    }
    .busBox {
      flex-grow: 1;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      .bus {
        display: flex;
        align-items: center;
        margin-bottom: 4rpx;
        i {
          font-size: 40rpx;
          height: 40rpx;
        }
        span {
          font-size: 24rpx;
        }
      }
    }
  }
}
.fixBar {
  .fixBg {
    width: 100%;
  }
  .bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20rpx 30rpx 50rpx;
    display: flex;
    align-items: center;
    background: linear-gradient(
      rgba(255, 255, 255, 0) 5%,
      rgb(255, 255, 255) 50%,
      rgb(255, 255, 255) 45%
    );
  }
  .square {
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100rpx;
    width: 100rpx;
    margin-right: 30rpx;
    &:last-child {
      margin-right: 0;
    }
    i {
      transform: translateY(-2rpx);
      font-size: 50rpx;
      height: 50rpx;
    }
  }
  .longSquare {
    width: auto;
    flex-grow: 1;
    span {
      font-size: 34rpx;
      font-weight: bold;
    }
  }
  .greenBG {
    box-shadow: 0rpx 6rpx 14rpx rgba(68, 192, 122, 0.3);
  }
  .blueBG {
    box-shadow: 0rpx 6rpx 14rpx rgba(9, 172, 254, 0.3);
  }
  .yellowBG {
    box-shadow: 0rpx 6rpx 14rpx rgba(255, 157, 0, 0.3);
  }
  .orangeBG {
    box-shadow: 0rpx 6rpx 14rpx rgba(249, 101, 12, 0.3);
  }
  .cantLike {
    box-shadow: 0rpx 6rpx 14rpx rgba(144, 147, 153, 0.3);
  }
}
map {
  width: 100%;
}
.xuanzhun {
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
</style>
